<template>
  <div class="grid items-center gap-4 mb-4">
    <Label for="hostname">
      {{ t("Hostname") }}
    </Label>
    <Input id="hostname" v-model="pageData.smtpHost" @change="updateValueFn" />
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="port">
      {{ t("Port") }}
    </Label>
    <Input
      id="port"
      v-model="pageData.smtpPort"
      @change="updateValueFn"
      type="number"
      min="0"
      max="65535"
      @keyup="checkMaxPortFn"
    />
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="security">
      {{ t("Security") }}
    </Label>
    <Select id="security" v-model="pageData.smtpSecure" @change="updateValueFn">
      <SelectTrigger>
        <SelectValue :placeholder="t('Security')" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="false">{{ t("secureOptionNone") }}</SelectItem>
        <SelectItem value="true">{{ t("secureOptionTLS") }}</SelectItem>
      </SelectContent>
    </Select>
  </div>
  <div class="flex items-center space-x-2 mb-6">
    <!-- smtpIgnoreTLSError -->
    <Checkbox
      id="smtpIgnoreTLSError"
      v-model:checked="pageData.smtpIgnoreTLSError"
    />
    <Label for="smtpIgnoreTLSError">
      {{ $t("Ignore TLS Error") }}
    </Label>
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="userName">
      {{ t("Username") }}
    </Label>
    <Input
      id="userName"
      v-model="pageData.smtpUsername"
      @change="updateValueFn"
    />
  </div>
  <div class="grid items-center gap-4 mb-4 relative">
    <Label for="password">
      {{ t("Password") }}
    </Label>
    <div class="relative">
      <Input
        id="password"
        :type="isPasswordVisible ? 'text' : 'password'"
        v-model="pageData.smtpPassword"
        autocomplete="new-password"
        @change="updateValueFn"
      />
      <div
        class="absolute inset-y-0 top-0 right-0 flex items-center pr-3 h-10 cursor-pointer select-none"
        @click="togglePasswordFn"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          v-show="!isPasswordVisible"
        >
          <path
            fill="currentColor"
            d="M12 9a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m0-4.5c5 0 9.27 3.11 11 7.5c-1.73 4.39-6 7.5-11 7.5S2.73 16.39 1 12c1.73-4.39 6-7.5 11-7.5M3.18 12a9.821 9.821 0 0 0 17.64 0a9.821 9.821 0 0 0-17.64 0"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          v-show="isPasswordVisible"
        >
          <path
            fill="currentColor"
            d="M2 5.27L3.28 4L20 20.72L18.73 22l-3.08-3.08c-1.15.38-2.37.58-3.65.58c-5 0-9.27-3.11-11-7.5c.69-1.76 1.79-3.31 3.19-4.54zM12 9a3 3 0 0 1 3 3a3 3 0 0 1-.17 1L11 9.17A3 3 0 0 1 12 9m0-4.5c5 0 9.27 3.11 11 7.5a11.79 11.79 0 0 1-4 5.19l-1.42-1.43A9.862 9.862 0 0 0 20.82 12A9.821 9.821 0 0 0 12 6.5c-1.09 0-2.16.18-3.16.5L7.3 5.47c1.44-.62 3.03-.97 4.7-.97M3.18 12A9.821 9.821 0 0 0 12 17.5c.69 0 1.37-.07 2-.21L11.72 15A3.064 3.064 0 0 1 9 12.28L5.6 8.87c-.99.85-1.82 1.91-2.42 3.13"
          />
        </svg>
      </div>
    </div>
  </div>

  <div class="grid items-center gap-4 mb-4">
    <Label for="sendFromName">
      {{ t("From Email") }}
    </Label>
    <Input
      id="sendFromName"
      v-model="pageData.smtpFrom"
      @change="updateValueFn"
      required
      autocomplete="false"
      placeholder='"Turns Support" &lt;example@turns.top&gt;'
    />
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="sendToName">
      {{ t("To Email") }}
    </Label>
    <Input
      id="sendToName"
      v-model="pageData.smtpTo"
      @change="updateValueFn"
      autocomplete="false"
      placeholder="example2@turns.top, example3@turns.top"
      :required="!hasRecipient"
    />
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="smtpCC">
      {{ t("smtpCC") }}
    </Label>
    <Input
      id="smtpCC"
      v-model="pageData.smtpCC"
      @change="updateValueFn"
      autocomplete="false"
      :required="!hasRecipient"
    />
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="smtpBCC">
      {{ t("smtpBCC") }}
    </Label>
    <Input
      id="smtpBCC"
      v-model="pageData.smtpBCC"
      @change="updateValueFn"
      autocomplete="false"
      :required="!hasRecipient"
    />
  </div>

  <div class="grid items-center gap-4 mb-4">
    <Label for="emailSubject">
      {{ t("emailCustomSubject") }}
    </Label>
    <Input
      id="emailSubject"
      v-model="pageData.customSubject"
      @change="updateValueFn"
      :placeholder="t('leave blank for default subject')"
    />
    <!-- <p class="text-xs opacity-35 leading-3 -mt-3">{{ t('leave blank for default subject') }}</p> -->
  </div>
  <div class="grid items-center gap-4 mb-4">
    <Label for="emailBody">
      {{ t("emailCustomBody") }}
    </Label>
    <Input
      id="emailBody"
      v-model="pageData.customBody"
      @change="updateValueFn"
      :placeholder="t('leave blank for default body')"
    />
    <!-- <p class="text-xs opacity-35 leading-3 -mt-3">{{ t('leave blank for default body') }}</p> -->
  </div>

  <!-- <div>
    <span style="color: red;margin-right: 8px;"><sup>*</sup></span>{{ $t("Required") }}
    <span class="text-xs opacity-85">{{ t('aboutWebhooks') }}<a href="https://service.opsnow.com/docs/alertnow/en/user-guide-alertnow-en.html#standard" target="_blank" class="underline text-primary">{{ t("here") }}</a></span>
  </div> -->
</template>

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ref, computed } from "vue";

import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      smtpHost: "",
      smtpPort: 0,
      smtpSecure: "false",
      smtpIgnoreTLSError: false,
      smtpUsername: "",
      smtpPassword: "",
      smtpFrom: "",
      smtpTo: "",
      smtpCC: "",
      smtpBCC: "",
      customSubject: "",
      customBody: "",
    }),
  },
});

const pageData = ref(props.data);

const emits = defineEmits(["update"]);

const updateValueFn = () => {
  emits("update", {
    smtpHost: pageData.value.smtpHost,
    smtpPort: pageData.value.smtpPort,
    smtpSecure: !!pageData.value.smtpSecure,
    smtpIgnoreTLSError: pageData.value.smtpIgnoreTLSError,
    smtpUsername: pageData.value.smtpUsername,
    smtpPassword: pageData.value.smtpPassword,
    smtpFrom: pageData.value.smtpFrom,
    smtpTo: pageData.value.smtpTo,
    smtpCC: pageData.value.smtpCC,
    smtpBCC: pageData.value.smtpBCC,
    customSubject: pageData.value.customSubject,
    customBody: pageData.value.customBody,
  });
};

const checkMaxPortFn = () => {
  if (pageData.value.smtpPort > 65535) {
    pageData.value.smtpPort = 65535;
  }
};
const hasRecipient = computed(() => {
  return !!(
    pageData.value.smtpTo ||
    pageData.value.smtpCC ||
    pageData.value.smtpBCC
  );
});

const isPasswordVisible = ref(false);
const togglePasswordFn = () => {
  isPasswordVisible.value = !isPasswordVisible.value;
};
</script>
